<template>
  <div class="mains">
    <h1>测试题</h1>
    <div class="item" v-for="(item, index) in list" :key="item.id">
      <label>{{ item.num1 }}</label
      >+<label>{{ item.num2 }}</label
      >=
      <input
        type="text"
        v-model.number="item.result"
        :disabled="item.flag"
        @keyup.enter="gentle(index)"
      />
      <button @click="gentle(index)" :disabled="item.flag">提交</button>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
  methods: {
    gentle(i) {
      this.$emit('gentle', i)
      this.$emit('input')
    },
  },
}
</script>

<style scoped>
input {
  width: 50px;
  margin: 0 10px;
}

label {
  margin: 0 5px;
}
.item {
  display: flex;
  font-size: 20px;
  margin-bottom: 10px;
}
</style>
